.user {
  padding: 12px;
  height: 100%;
  background: #f0f0f0;

  header {
    background-color: #fff;
  }

  .head {
    height: 20%;
    background: linear-gradient(150deg, #f4b45d, #fa170d);
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: white;

    .userSet {
      position: absolute;
      right: 30px;
      display: flex;
      align-items: center;
      top: 80px;

      img {
        width: 32px;
        vertical-align: top;
      }
    }

    p {
      color: white;
      font-size: 24px;
    }

    img {
      width: 22%;
      border-radius: 50%;
      margin: 0 15px 0;
      //height: 22%;
    }

    .info {

      p {
        &:nth-child(2) {
          color: #f4e177;
          font-size: 32px;
          margin-top: 0.1rem;
          font-weight: 800;
        }

        span {
          font-size: 20px;
          color: white;
          font-weight: normal;

          img {
            width: 32px;
            vertical-align: middle;
            margin: 0
          }
        }
      }

      .hed {
        margin-top: 0.2rem;
        display: flex;
        align-items: center;

        p {
          background: #c30000;
          border-radius: 40px;
          margin-right: 15px;
          padding: 4px 30px;
          text-align: center;
          font-size: 20px;
          color: #f4e177;
          display: flex;
          align-items: center;
          margin-top: 0;
          font-weight: 800;

          .trangle {
            width: 0px;
            height: 0px;
            border: 8px solid white;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: #f4e177;
            border-right-color: transparent;
            margin-left: 12px;
          }
        }
      }

    }
  }


  .mui-table-view {
    margin-top: 16px;

    &:after {
      height: 0;
    }

    &:before {
      height: 0;
    }

    .mui-table-view-cell.hed {
      img {
        width: 36px;
        margin-right: 12px;
      }
    }

    .mui-table-view-cell .hed {
      img {
        width: 36px;
        margin-right: 12px;
      }
    }

    .mui-table-view-cell {
      padding: 20px;
      height: 80px;
      border-bottom: 2px solid #e8e8e8;
      border-radius: 4px;
      width: 98%;
      margin: 0 auto;

      a {
        width: 100%;
        height: 100%;
        color: black;

        img {
          &:last-child {
            width: 32px;
            position: absolute;
            right: 10px;
          }
        }
      }
    }
  }

  ul {
    background-color: #fff;
    border-radius: 12px;
  }
}

.headImg {
  width: 180px !important;
  height: 180px !important;
}
